<template>
	<view class="rowW gap40">
		<view class="goods-box radius24" v-for="item in list" :key="item.goods_id" @click="hanldeClick(item.goods_id)">
			<view class="image-box">
				<image class="goods-image radius24" :src="item.goods_info.cover+'?image_process=resize,l_350'"
					mode="aspectFill"></image>
				<view class="number text-center font-28 color-white pad-top-bottom-10">
					流通：{{item.goods_info.out_cnt - item.goods_info.broken_cnt}} 份</view>
				<view v-if="item.market_cnt == 0">
					<image mode="aspectFill" class="status" src="../../static/image/market-out.png"></image>
				</view>
			</view>
			<view class="info pad-left-right-32  pad-top-bottom-16">
				<view class="name font-24 color-white">{{item.goods_info.name}}</view>
				<capsule color="#000" bgColor="#ffffff" title="发行" class="mar-top-10" :number="item.goods_info.build"></capsule>
				<view class="text-right color-theme mar-top-10 font-40"><text class="font-24">￥</text>{{item.min_price}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				default: []
			},
		},
		methods: {
			// 改变状态
			hanldeClick(goods_id) {
				this.$emit('click', goods_id)
			},
		}
	}
</script>

<style scoped lang="scss">
	.goods-box {
		background: $uni-bg-theme1;
		width: 328rpx;
		background-size: 100% auto;
		background-repeat: no-repeat;
		background-position: bottom;
		border: 2rpx solid $uni-theme;
		border-radius: 24rpx;
		box-sizing: border-box;

		.image-box {
			width: 100%;
			position: relative;
			// padding: 13rpx 13rpx 0 13rpx;
			box-sizing: border-box;
			

			.number {
				position: absolute;
				background: rgba(0, 0, 0, .5);
				bottom: 0rpx;
				width: 100%;
				border-radius: 0 0 24rpx 24rpx;
				box-sizing: border-box;
			}

			.status {
				position: absolute;
				right: 0rpx;
				bottom: 30rpx;
				width: 130rpx;
				height: 104rpx;
			}

			// &::after {
			// 	content: '';
			// 	position: absolute;
			// 	width: 300rpx;
			// 	height: 300rpx;
			// 	background: rgba(0,0,0,.08);
			// 	right: -10rpx;
			// 	top: 15rpx;
			// 	border-radius: 20px;
			// 	z-index: -1;
			// }
		}

		// .info {
		// 	background: url('../../static/image/goods-bg.png') no-repeat;
		// 	background-size: 100% 100%;
		// }

		.name {
			font-weight: 500;
		}

		.goods-image {
			display: block;
			width: 100%;
			height: 328rpx;
		}
	}
</style>